<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-05-16 14:34:32
 * @LastEditors: william
 * @LastEditTime: 2025-08-11 14:52:27
-->
<template>
  <textarea ref="refNwMsgInput" id="nw-msg-input" v-model="modelValue" :placeholder="$t('push.inputMessage')"
    @keydown="textareaListener">
  </textarea>
</template>

<script setup>
const emits = defineEmits(['enter', 'sendImage', 'sendFile'])
const modelValue = defineModel({
  type: String,
  default: ''
})

const refNwMsgInput = ref(null)

onMounted(() => {
  listerInput()
  pasteFileHandle()
  dragFileHandle()
})

const listerInput = () => {
  const textarea = refNwMsgInput.value
  const minRows = 3
  const maxRows = 5

  // 监听输入事件
  textarea.addEventListener('input', () => {
    // 计算当前的行数
    const currentRows = textarea.value.split('\n').length

    // 确保行数在 minRows 和 maxRows 之间
    if (currentRows < minRows) {
      textarea.rows = minRows
    } else if (currentRows > maxRows) {
      textarea.rows = maxRows
    } else {
      textarea.rows = currentRows
    }
  })
}

const focus = _ => {
  refNwMsgInput.value?.focus()
}

/**
 * 监听textarea 键盘事件 取消回车换行 改为 shift+回车 换行
 */
const textareaListener = e => {
  // console.log(e)
  if (e.keyCode === 13 && !e.shiftKey) {
    emits('enter', modelValue.value)
    e.preventDefault()
    return false
  }
}

const sendEmits = files => {
  if (!files.length) return
  // 快速检查MIME类型
  if (files[0].type.startsWith('image/')) {
    emits('sendImage', files)
  } else {
    emits('sendFile', files)
  }
}

/**
 * 粘贴文件处理
 */
const pasteFileHandle = () => {
  refNwMsgInput.value.addEventListener('paste', async e => {
    // 粘贴事件 监听函数：获取粘贴板文件数据、上传文件、发送消息
    const items = (e.clipboardData || e.originalEvent.clipboardData).items
    const files = []
    for (const index in items) {
      const item = items[index]
      if (item.kind === 'file') {
        files.push(item.getAsFile())
      }
    }
    sendEmits(files)
  })
}

/**
 * 拖拽文件处理
 */
const dragFileHandle = () => {
  const events = ['dragenter', 'dragover', 'drop', 'dragleave']
  events.forEach(event => {
    refNwMsgInput.value.addEventListener(event, e => {
      e.preventDefault()
      e.stopPropagation()
    })
  })
  // 记录最后拖拽进入的元素 处理 进入子元素会触发 dragleave 的问题
  let lastElement = null
  refNwMsgInput.value.addEventListener('dragenter', e => {
    lastElement = e.target
    refNwMsgInput.value.classList.add('highlight')
  })
  refNwMsgInput.value.addEventListener('drop', async e => {
    // 鼠标放下事件 监听函数：获取文件数据、上传文件、发送消息
    refNwMsgInput.value.classList.remove('highlight')
    const files = e.dataTransfer.files
    sendEmits(files)
  })
  refNwMsgInput.value.addEventListener('dragleave', e => {
    if (e.target === lastElement) {
      refNwMsgInput.value.classList.remove('highlight')
    }
  })
}

defineExpose({
  refNwMsgInput,
  focus
})
</script>

<style lang="scss" scoped>
#nw-msg-input {
  width: 100%;
  height: 90%;
  line-height: 1.5;
  padding: 5px 11px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  // border: 1px solid #dcdfe6;
  // border-radius: 4px;
  box-sizing: border-box;
  border: none;

  &.highlight {
    background-color: #f0f0f0;
    color: #999;
  }
}
</style>
